<template>
  <div id="mg-ep-page">
    <div class="mg-info" v-if="infoData !== undefined">
      <back-button :top="10" :left="-100"/>
      <div class="mark" v-if="!isView"><img src="@/assets/icon/ChefHat.svg" alt=""></div>
      <el-skeleton class="mg-info" style="width: 100%;" :loading="infoLoading" :rows="6" animated :throttle="500">
        <template slot="template">
          <div id="skeleton-box">
            <el-skeleton-item variant="image" class="skeleton-img"/>
            <div class="skeleton-info">
              <el-skeleton-item variant="h1" style="width: 30%; margin-top: 10px"/>
              <el-skeleton-item variant="h3" style="width: 20%; margin-top: 10px"/>
              <el-skeleton-item variant="h3" style="width: 50%; margin-top: 10px"/>
              <el-skeleton-item variant="h3" style="width: 50%; margin-top: 10px"/>
              <el-skeleton-item variant="h3" style="width: 50%; margin-top: 10px"/>
              <el-skeleton-item variant="h3" style="width: 5%; margin-top: 10px"/>
              <el-skeleton-item variant="text" style="width: 100%; margin-top: 10px"/>
              <el-skeleton-item variant="text" style="width: 100%; margin-top: 10px"/>
              <el-skeleton-item variant="text" style="width: 100%; margin-top: 10px"/>
            </div>
          </div>
        </template>
        <template>
          <div class="mg-cover-box">
            <img :src="infoData.thumbCoverUrl ? infoData.thumbCoverUrl : infoData.coverUrl" alt="">
            <div class="btn-box">
              <collect-btn/>
              <like-btn ref="likeBtn" @handleLike="handleLike"/>
            </div>
          </div>

          <div class="mg-info-box animate__animated animate__fadeInRight">
            <h1>{{ infoData.name }}</h1>
            <h5>作者：{{ infoData.author }}</h5>
            <h5>状态：{{ infoData.status === 0 ? '连载中🚀' : '已完结' }}</h5>
            <h5>最后更新：{{ formatToDay(new Date(infoData.modifyTime)) }}</h5>
            <h5 class="cnTeam">汉化负责：{{ infoData.cnTeam }}</h5>
            <div class="about-box">
              <h5>简介：</h5>
              <div :class="onShowMore ? 'about-on' : 'about-off'">{{ infoData.about }}</div>
              <el-button @click="onShowMore = !onShowMore" type="text" class="more" v-if="showMoreBtn">
                {{ onShowMore ? '收起' : '更多' }}<i :class="onShowMore ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"/>
              </el-button>
            </div>
          </div>
        </template>
      </el-skeleton>
    </div>
    <div class="mg-ep-list">
      <div class="ep-tab-box theme-border-bottom">
        <span>章节列表</span>
        <el-select v-model="activeTab" placeholder="章节分栏" class="dropdown-tabs">
          <el-option
              v-for="(item, index) in tabsData"
              :key="index"
              :label="item.label"
              :value="item.content">
          </el-option>
        </el-select>
      </div>
      <empty-box v-if="tabsData.length === 0" tip="在努力烤肉啦"/>
      <div class="ep-item-box">
        <div class="ep-item  animate__animated animate__fadeInUp" v-for="item in activeTab" :key="item.epId"
             @click.stop="toEpDtPage(item.epId)">
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {epList, like, likeCount, mangaDt, plusView} from "@/api/mgApi";
import {formatToDay} from "@/util/timeUtil";
import BackButton from "@/components/common/back-button.vue";
import {epShowType} from "@/router/router";
import LikeBtn from "@/components/btn/likeBtn.vue";
import CollectBtn from "@/components/btn/collectBtn.vue";

export default {
  name: "mgEpPage",
  components: {CollectBtn, LikeBtn, BackButton},
  data() {
    return {
      infoLoading: true,
      activeTab: '',
      tabSpan: 100,
      infoData: {},
      epData: [],
      tabsData: [],
      onShowMore: false,
      showMoreBtn: false
    }
  },
  computed: {
    isView() {
      return epShowType === 'view';
    }
  },
  methods: {
    formatToDay,
    /**
     * 初始化
     */
    init() {
      // 获取章节列表
      epList(this.$route.query.id)
          .then(res => {
            if (this.isView) {
              this.epData = res.data.filter(item => item.isAvailable === true)
            } else {
              this.epData = res.data;
            }
            this.handleTabs(this.tabSpan);
          })
      // 获取漫画详情
      mangaDt(this.$route.query.id)
          .then(res => {
            this.infoData = res.data;
            this.infoLoading = false;
            this.getLikeCount(res.data.mangaId)
            this.computedShowMoreBtn()
          })
      if (this.isView) {
        // 发送阅读数 + 1 埋点统计请求
        plusView(this.$route.query.id)
      }
    },
    /**
     * 处理分栏
     * @param pageSize 每页显示的章节数
     */
    handleTabs(pageSize) {
      let epListData = this.epData;
      if (epListData && epListData.length > 0) {
        // 获取总页数
        let totalPage = Math.ceil(epListData.length / pageSize);
        // 计算分页数据
        for (let pageNumber = 1; pageNumber <= totalPage; pageNumber++) {
          let startIndex = (pageNumber - 1) * pageSize;
          let endIndex = Math.min(startIndex + pageSize - 1, epListData.length - 1);
          this.tabsData.push({
            label: `${startIndex + 1} - ${endIndex + 1}`,
            number: `${pageNumber - 1}`,
            content: epListData.slice(startIndex, endIndex + 1)
          })
        }
        // 设置默认选中的分栏
        this.activeTab = this.tabsData[0].content;
      }
    },
    /**
     * 获取漫画点赞数
     */
    getLikeCount(mangaId) {
      // 获取漫画点赞数
      likeCount(mangaId).then(res => {
        this.$refs.likeBtn.init(Number(res.data.count), res.data.flag)
      })
    },
    /**
     * 点击喜欢按钮
     */
    handleLike(flag) {
      // 点赞
      like(this.infoData.mangaId, !flag).then(() => {
        this.getLikeCount(this.infoData.mangaId)
      })
    },
    /**
     * 跳转至章节详情页
     * @param id 章节id
     */
    toEpDtPage(id) {
      this.$router.push({
        name: 'mgEpDt',
        query: {
          id: id
        }
      })
    },
    /**
     * 计算是否显示更多按钮
     */
    computedShowMoreBtn() {
      this.showMoreBtn = this.infoData.about.length >= 290
    }
  },
  mounted() {
    this.init();
  },
  watch: {
    $route() {
      this.init();
    }
  }
}
</script>

<style scoped lang="scss">
@import url("@/scss/mgEp.scss");
</style>